<template>
<div id="bagUser_manage">
    <div class="left-table">
        <div class="wrap-top">
            <div class="area">
                <span>区域:</span>
                <el-select v-model="areaItem">
                    <el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="user">
                <span>用户名:</span>
                <el-input placeholder="请输入内容" v-model="user" clearable>
                </el-input>
            </div>
            <el-button type="primary" class="search" @click="search">搜索</el-button>
        </div>
        <div class="table-content">
            <div class="table-head">
                <div class="ownArea">所属区域</div>
                <div class="wrap-lists">
                    <div class="users"> <span>用户</span> </div>
                    <div class="type"><span>用水类型</span></div>
                    <div class="contacts"><span>联系人</span></div>
                    <div class="contactWay"><span>联系方式</span></div>
                    <div class="tel"><span>手机号</span></div>
                    <div class="action"><span>操作</span></div>
                </div>
            </div>
            <div class="area-item" v-for="(v,i) in table" :key="i" v-if="v.userList.length>0">
                <div class="ownArea">{{v.ownArea}}</div>
                <div class="wrap-lists">
                    <div class="lists" v-for='(item,index) in v.userList' :key="index">
                        <div class="users" :title="item.NAME">
                            <span>{{item.NAME}}</span>
                        </div>
                        <div class="type" :title="item.type"><span>{{item.WATER_PLAN}}</span> </div>
                        <div class="contacts" :title="item.contacts"> <span>{{item.contacts}}</span> </div>
                        <div class="contactWay" :title="item.contactWay"> <span>{{item.PHONE}}</span> </div>
                        <div class="tel" :title="item.tel"> <span>{{item.telephone}}</span></div>
                        <div class="action">
                            <span class="btn" @click="openModel(index)">
                                    编辑
                                </span>
                            <span class="btn" @click="del(i,index,item.ID)">
                                    删除
                                </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pagination">
            <el-pagination background layout="prev, pager, next" :total="totalPage" @prev-click="gottoPrev" @next-click="gotoNext" @current-change="gotoThisPage">
            </el-pagination>
        </div>
    </div>
    <div class="right-tree">
        <div class="title">水投集团</div>
        <div class="tree-content">
            <!-- <v-jstree :data="tree" show-checkbox multiple allow-batch whole-row @item-click="itemClick"></v-jstree> -->
            <el-tree :data="tree" :props="defaultProps" accordion @node-click="handleNodeClick">
            </el-tree>
        </div>
    </div>
    <edit-model @hiddenSelf="hiddenModel" :showEditModel="edit_model" @saveUper="saveInputs_" :title="'大用户用水管理'">
        <div class="inputs">
            <div class="row">
                <div class="col">
                    <label for="name">用户名：</label>
                    <input type="text" id="name" v-model="saveInputs.name" placeholder="请输入用户名">
                </div>
                <div class="col">
                    <label for="ownArea">所属区域：</label>
                    <input type="text" v-model="saveInputs.areaId" id="ownArea" placeholder="请输入用户名">
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <label for="type">用水类型：</label>
                    <input type="text" v-model="saveInputs.waterPlan" id="type" placeholder="用水类型">
                </div>
                <div class="col">
                    <label for="old">联系人：</label>
                    <input type="text" v-model="saveInputs.contacts" id="old" placeholder="请输入联系人">
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <label for="number">服务人口数：</label>
                    <input type="text" v-model="saveInputs.serviceNum" id="number" placeholder="请输入服务人口数">
                </div>
                <div class="col">
                    <label for="stablePhone">联系方式：</label>
                    <input type="text" v-model="saveInputs.telephone" id="stablePhone" placeholder="请输入联系方式">
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <label>所属管道：</label>
                    <el-select v-model="pipeItem" placeholder="请选择">
                        <el-option v-for="item in pipeList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="col">
                    <label for="stablePhone">手机号：</label>
                    <input type="text" v-model="saveInputs.phone" id="stablePhone" placeholder="请输入手机号">
                </div>
            </div>
        </div>
    </edit-model>
    <save-model :showModel='show_Model' :delNum="delId" :type="type" :flag="flag" :content="content" @sureDelThis="sureDel"></save-model>
</div>
</template>

<script>
import VJstree from "vue-jstree";
import saveModel from "@/common/components/poupe/save_status";
import editModel from "@/common/components/poupe/edit";
import {
    getPipeWaterUserInfo
} from "@/api/pipeNet_msg/bagUser_manage";
import {
    saveOrUpdate
} from "@/api/pipeNet_msg/bagUser_manage";
export default {
    components: {
        VJstree,
        saveModel,
        editModel
    },
    data() {
        return {
            type: false,
            flag: false,
            content: "XXX",
            delId: null, //要删除的ID
            del_index: null, //要删除的索引
            areaIndex:null, // 要删除的区域ID
            show_Model: false,
            edit_model: false,
            areaList: [],
            areaItem: "",
            user: "",
            table: [],
            tree: [],
            defaultProps: {
                children: "children",
                label: "label",
                id: "id"
            },
            selected: null,
            totalPage: 1,
            saveInputs: {
                id: "",
                name: "",
                shortName: "",
                pointId: "",
                areaId: "",
                waterPlan: "",
                contacts: "",
                serviceNum: "",
                telephone: "",
                pipeCode: "",
                insertTime: "",
                status: "",
                phone: ""
            },
            pipeList: [{
                    label: "全部",
                    value: ""
                },
                {
                    label: "临江大道1",
                    value: "1"
                },
                {
                    label: "临江大道2",
                    value: "2"
                }
            ],
            pipeItem: ""
        };
    },
    methods: {
        cancelSelect(arr, selectIndex) {
            let temp_arr = arr;
            let len = temp_arr.length;
            if (temp_arr.length > 0) {
                for (let i = 0; i < len; i++) {
                    if (i != selectIndex) {
                        temp_arr[i].selected = false;
                        if (temp_arr[i].children && temp_arr[i].children.length) {
                            for (let j = 0; j < temp_arr[i].children.length; j++) {
                                temp_arr[i].children[j].selected = false;
                            }
                        }
                    }
                }
            }
            return temp_arr;
        },
        pearentFlag(arr) {
            let temp_arr = arr;
            let flag = false;
            if (temp_arr.length) {
                for (let i = 0; i < temp_arr.length; i++) {
                    if (temp_arr[i].selected == true) {
                        flag = true;
                        break;
                    }
                }
            }
            return flag;
        },
        itemClick(node, item, e) {
            let that = this;
            let temp_index = parseInt(item.id) - 1;
            let subItem_index = "";
            let temp_str = item.id;
            if (temp_str.length == 1) {
                that.tree[temp_index].opened = that.tree[temp_index].selected ?
                    true :
                    false;
                that.tree = that.cancelSelect(that.tree, temp_index);
            } else {
                temp_index = parseInt(temp_str.substring(0, 1)) - 1;
                subItem_index = parseInt(temp_str.substring(1)) - 1;
                let flag = that.pearentFlag(that.tree[temp_index].children);
                if (flag) {
                    that.tree[temp_index].selected = true;
                } else {
                    that.tree[temp_index].selected = false;
                }
                that.tree = that.cancelSelect(that.tree, temp_index);
            }
            let temp_search = "";
            let temp_selectList = that.tree[temp_index].children.filter(item => {
                return item.selected == true;
            });
            if (temp_selectList.length) {
                for (let i = 0; i < temp_selectList.length; i++) {
                    temp_search += temp_selectList[i].text + ",";
                }
                if (temp_selectList.length == that.tree[temp_index].children.length) {
                    temp_search = that.tree[temp_index].text;
                }
            }
        },
        sureDel(obj) {
            let that = this;
            let temp_id = obj.num;
            this.configDel(temp_id);
        },
        openModel(index) {
            this.num = index;
            // this.show_Model = true;
            this.edit_model = true;
        },
        hiddenModel(flag) {
            this.edit_model = flag;
        },
        saveInputs_(flag) {
            this.edit_model = flag;
        },
        getAreaUserList(id, name, areaId, page) {
            let that = this;
            getPipeWaterUserInfo({
                id: "" + id,
                name: "" + name,
                areaId: "" + areaId,
                pageSize: "10",
                page: "" + page
            }).then(res => {
                let data = res.data;
                if (data) {
                    let {
                        rows
                    } = data;
                    let oldList = [];
                    let newArea = [];
                    let temp_area = [{
                            ownArea: "老城区",
                            id: "" + that.DSE.area.old,
                            userList: []
                        },
                        {
                            ownArea: "新城区",
                            id: "" + that.DSE.area.new,
                            userList: []
                        },
                        {
                            ownArea: "开发区",
                            id: "" + that.DSE.area.deve,
                            userList: []
                        }
                    ];
                    let temp_newAreaId = that.DSE.area.new;
                    let temp_oldAreaId = that.DSE.area.old;
                    let temp_deveAreaId = that.DSE.area.deve;
                    for (let i = 0; i < rows.length; i++) {
                        if (rows[i].AREA_ID == temp_newAreaId) {
                            temp_area[1].userList.push(rows[i]);
                        } else if (rows[i].AREA_ID == temp_oldAreaId) {
                            temp_area[0].userList.push(rows[i]);
                        } else if (rows[i].AREA_ID == temp_deveAreaId) {
                            temp_area[2].userList.push(rows[i]);
                        }
                    }
                    that.table = temp_area;
                    let {
                        total
                    } = data;
                    if (total) {
                        that.totalPage = Math.ceil(parseInt(total) / 10);
                    }
                } else {
                    that.table = [];
                }
            });
        },
        search() {
            let temp_areaItem = this.areaItem
            let temp_user = this.user;
            let temp_compId = this.selected.id;
            this.getAreaUserList(temp_areaItem, temp_user, temp_compId, "1");
        },
        openEditModel() {
            this.edit_model = true;
        },
        gottoPrev(val) {
            let temp_areaItem = this.areaItem
            let temp_user = this.user;
            let temp_compId = this.selected.id;
            if (val) {
                this.getAreaUserList(temp_areaItem, temp_user, temp_user, val + "");
            }
        },
        gotoNext(val) {
            let temp_areaItem = this.areaItem
            let temp_user = this.user;
            let temp_compId = this.selected.id;
            if (val) {
                this.getAreaUserList(temp_areaItem, temp_user, temp_user, val + "");
            }
        },
        gotoThisPage(val) {
            let temp_areaItem = this.areaItem
            let temp_user = this.user;
            let temp_compId = this.selected.id;
            if (val) {
                this.getAreaUserList(temp_areaItem, temp_user, temp_user, val + "");
            }
        },
        configDel(id) {
            let that = this;
            saveOrUpdate({
                id: "" + id,
                status: "" + 3
            }).then(res => {
                let temp_status = res.status;
                if (temp_status) {
                    that.show_Model = false;
                    let temp_areaIndex = that.areaIndex;
                    that.table[temp_areaIndex].userList.splice(that.del_index, 1);
                }
                that.areaIndex = null;
                that.del_index = null;
            });
        },
        del(i,index, id) {
            let that = this;
            that.show_Model = true;
            this.areaIndex = i;
            this.delId = id;
            this.del_index = index;
        },
        handleNodeClick(data) {
            this.selected = data;
            this.getAreaUserList(data.id, "", "", "", "1")
        }
    },
    created() {
        this.getAreaUserList("", "", "", "1");
        this.tree = this.DSE.tree;
        this.areaList = this.DSE.areaLists;
    }
};
</script>

<style lang="scss" scoped>
* {
    box-sizing: border-box;
}

#bagUser_manage {
    width: 100%;
    height: 100%;
    background: #ebebeb;
    display: flex;
    justify-content: space-between;
    padding: 10px 1% 0;
    .left-table {
        width: 80%;
        background: #fff;
        padding: 10px; // height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .wrap-top {
            width: 100%;
            height: 30px;
            line-height: 30px;
            display: flex;
            justify-content: flex-start;
            font-size: 12px;
            &>div {
                width: 200px;
                display: flex;
                justify-content: space-between;
                margin-right: 10px;
                span {
                    width: 70px;
                    display: inline-block;
                }
            }
        }
        .table-content {
            width: 100%;
            height: calc(100% - 100px);
            overflow-y: auto;
            line-height: 30px;
            font-size: 14px;
            color: #333;
            text-align: center;
            border: 1px solid #ccc; // border-top: none;
            .table-head {
                width: 100%;
                display: flex;
                justify-content: space-between;
                height: 30px;
                background: #e2edef;
                font-weight: 600;
                .ownArea {
                    width: 100px;
                    border-bottom: 1px solid #ccc;
                }
                .wrap-lists {
                    width: calc(100% - 100px);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    &>div {
                        flex: 1;
                        line-height: 30px;
                        border-left: 1px solid #ccc;
                        height: 30px;
                        span {
                            display: inline-block;
                            width: 100%;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                    &>div.users {
                        flex: none;
                        width: 40%; // padding: 0 10px;
                    }
                    &>div {
                        border-bottom: 1px solid #ccc;
                        &:last-child {
                            border-right: none;
                        }
                    }
                }
            }
            .area-item {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #ccc;
                .ownArea {
                    width: 100px;
                }
                .wrap-lists {
                    width: calc(100% - 100px);
                    .lists {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        border-bottom: 1px solid #ccc;
                        height: 30px;
                        line-height: 30px;
                        &>div {
                            flex: 1;
                            line-height: 30px;
                            border-left: 1px solid #ccc;
                            span {
                                display: inline-block;
                                width: 100%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                        &>div.users {
                            flex: none;
                            width: 40%; // padding: 0 10px;
                            span {
                                display: inline-block;
                                line-height: 30px;
                                width: 100%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                        &:last-child {
                            border-bottom: none;
                        }
                        .action {
                            font-size: 12px;
                            display: flex;
                            justify-content: space-around;
                            align-items: center;
                            span {
                                display: inline-block;
                                line-height: 25px; // border: 1px solid blue;
                                color: #0984fe;
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        }
        .pagination {
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: center;
        }
    }
    .right-tree {
        width: 19%;
        background: #fff;
        .title {
            height: 30px;
            width: 100%;
            background: #e2edef;
            line-height: 30px;
            padding-left: 10px;
            font-weight: 600;
            font-size: 14px;
        }
        .tree-content {
            padding: 10px;
            width: 100%;
            height: calc(100% - 30px);
        }
    }
    .inputs {
        width: 100%;
        height: 100%; // padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .row {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            .col {
                width: 50%;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                font-weight: 600;
                color: #333;
                label {
                    display: inline-block;
                    width: 100px;
                    text-align: right;
                }
                input {
                    display: inline-block;
                    width: calc(100% - 140px);
                    border-radius: 4px;
                    height: 25px;
                    padding-left: 5px;
                    border: 1px solid #ccc;
                }
                .el-select {
                    width: calc(100% - 140px);
                }
            }
        }
    }
}
</style>
